<script lang="ts">
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte'; // 假设你有 Button 组件
	import Input from '$lib/components/Form/Input/Input.svelte';
	import Divider from '$lib/components/Basic/Divider/Divider.svelte';

	// --- 模拟数据生成 ---
	const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: `User ${i + 1}`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));

	// --- 模拟多级表头数据 ---
	const groupHeaderData = Array.from({ length: 5 }, (_, i) => ({
		date: '2024-05-0' + (i + 1),
		name: `User ${i + 1}`,
		province: 'Guangdong',
		city: 'Shenzhen',
		address: `Nanshan District, No. ${i * 100 + 1} Street`,
		zip: 518000 + i
	}));

	const basicData = generateData(5);
	const stripeData = generateData(5);
	const selectionData = generateData(5);
	const sortFilterData = generateData(10);
	const summaryData = generateData(5);
	const largeData = generateData(1000); // 虚拟滚动数据

	// --- 代码字符串 (用于 ComponentPreview) ---
	const codeBasic = `<script lang="ts">
    import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const basicData = generateData(5);
<\/script>
<div style="height: 250px;">
   <Table data={basicData} size="lg">
		<TableColumn key="id" title="ID" width={80} />
		<TableColumn key="name" title="Name" />
		<TableColumn key="age" title="Age" />
		<TableColumn key="role" title="Role" />
	</Table>
</div>`;

	const codeStripeBorder = `<script lang="ts">
    import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const stripeData = generateData(5);
<\/script>
<div>
    <Table data={stripeData} size="lg" stripe border>
		<TableColumn key="name" title="Name" width={150} />
		<TableColumn key="age" title="Age" width={100} />
		<TableColumn key="role" title="Role" />
		<TableColumn key="status" title="Status" minWidth={200} />
	</Table>
</div>`;

	const codeSelection = `<script lang="ts">
    import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const selectionData = generateData(5);
<\/script>
<div>
   <Table data={selectionData} size="lg" multiple border>
		<TableColumn key="name" title="Name" width={150} />
		<TableColumn key="role" title="Role" />
		<TableColumn key="status" title="Status" />
		<TableColumn key="age" title="Age" />
	</Table>
</div>`;

	const codeSortFilter = `<script lang="ts">
   import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const sortFilterData = generateData(10);
	const filterKeyword: {
		min: number | null;
		max: number | null;
	} = $state({
		min: null,
		max: null
	});
	const onFilter = (
		value: { min: number | null; max: number | null },
		row: Record<string, any>
	) => {
		const { min, max } = value || {};
		const cellVal = row.age;
		if (min && cellVal < Number(min)) return false;
		if (max && cellVal > Number(max)) return false;
		return true;
	};
	let maxInputRef: HTMLInputElement | null = $state(null);
<\/script>

<Table data={sortFilterData} size="lg" border>
	<TableColumn key="name" title="Name" width={150} filterable/>
	<TableColumn key="age" title="Age (Sortable)" width={250} sortable filterable {onFilter}>						
		{#snippet filterDropdown({ onConfirm, onReset })}
			<div class="filterDropdown">
				<Input size="lg" placeholder="最小值" bind:value={filterKeyword.min} width="150px" onKeydown={(event) => {if (event.key === 'Enter') {maxInputRef?.focus();}}}/>
				<Icon src="form/minus" />
				<Input bind:inputRef={maxInputRef} size="lg" placeholder="最大值" bind:value={filterKeyword.max} width="150px"
					onKeydown={(event) => {if (event.key === 'Enter') {onConfirm(filterKeyword);}}}/>
			</div>
			<Divider style="dashed" margin="8px" />
			<div class="filter-actions">
				<RectButton label="重置" variant="info" type="link" size="lg" style="height: auto;padding:4px 10px;" onClick={() => {filterKeyword.min = null;filterKeyword.max = null;onReset();}}></RectButton>
				<RectButton label="筛选" variant="primary" type="link" size="lg" style="height: auto;padding:4px 10px;" onClick={() => onConfirm(filterKeyword)}></RectButton>
			</div>
		{/snippet}
	</TableColumn>
	<TableColumn key="role" title="Role (Auto Filter)" width={250} filterable dataFilters/>
	<TableColumn key="status" title="Status (Custom Filter)" filterable filters={[{ label: 'Active', value: 'Active' },{ label:'Inactive', value: 'Inactive' }]}/>
</Table>

<\style>
	.filterDropdown {
		display: flex;
		padding: 6px 8px 4px 8px;
		gap: 10px;
		align-items: center;
	}
	.filter-actions {
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
	}
</style>`;

	const codeSlot = `<script lang="ts">
	import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const basicData = generateData(5);
<\/script>
<div style="height: 250px;">
    <Table data={basicData} border size="lg">
        <TableColumn key="id" title="ID" width={80} />
        <TableColumn key="name" title="User Info" width={200}>
            <!-- 自定义单元格内容 -->
             {#snippet cell({ row })}
                <div style="display:flex; align-items:center; gap:8px;">
                    <Icon src="user/avatar" size="16" />
					<span style="font-weight:bold;line-height:16px;">{row.name}</span>
                </div>
            {/snippet}
        </TableColumn>
        <TableColumn key="status" title="Status">
             {#snippet cell({ row })}
                <RectButton size="sm" variant={row.status === 'Active' ? 'success' : 'warning'}>{row.status}</RectButton>
            {/snippet}
        </TableColumn>
        <TableColumn key="action" title="Action" width={120} align="center">
             {#snippet cell({ row })}
                <RectButton type="link" size="sm" onClick={()=>alert(row.name)}>Edit</RectButton>
            {/snippet}
        </TableColumn>
    </Table>
</div>`;

	const codeSummary = `<script lang="ts">
    import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const summaryData = generateData(5);
<\/script>
<div style="height: 250px;">
    <Table data={summaryData} border showSummary size="lg">
        <TableColumn key="id" title="ID" width={80} summaryText="Total" />
        <TableColumn key="name" title="Name" />
        <TableColumn 
            key="amount" 
            title="Amount" 
            summary={true} 
            summaryFormatter={(val) => \`$ \${val}\`} 
        />
        <TableColumn key="age" title="Avg Age" summary="avg" />
    </Table>
</div>`;

	const codeVirtual = `<script lang="ts">
    import { Table, TableColumn } from '$lib/components/Data/Table';
    const generateData = (length = 5) =>
		Array.from({ length }, (_, i) => ({
			id: i + 1,
			name: \`User \${i + 1}\`,
			age: 20 + (i % 30),
			role: ['Admin', 'Editor', 'Viewer'][i % 3],
			status: ['Active', 'Pending', 'Inactive'][i % 3],
			amount: (Math.random() * 1000).toFixed(2)
		}));
	const largeData = generateData(1000);
<\/script>
<!-- 必须指定容器高度 -->
<div style="height: 400px;">
   <Table data={largeData} virtualized border size="lg">
		<TableColumn key="id" title="ID" minWidth={80} />
		<TableColumn key="name" title="Name" minWidth={150} />
		<TableColumn key="age" title="Age" minWidth={80} />
		<TableColumn key="role" title="Role" minWidth={120} />
		<TableColumn key="amount" title="Amount" minWidth={120} />
		<TableColumn key="status" title="Status" minWidth={100} />
	</Table>
</div>`;

	const codeGroupHeader = `<script lang="ts">
    import { Table, TableColumn } from '$lib/components/Data/Table';
    const groupHeaderData = Array.from({ length: 5 }, (_, i) => ({
		date: '2024-05-0' + (i + 1),
		name: \`User \${i + 1}\`,
		province: 'Guangdong',
		city: 'Shenzhen',
		address: \`Nanshan District, No. \${i * 100 + 1} Street\`,
		zip: 518000 + i
	}));
<\/script>
<Table data={groupHeaderData} border>
	<TableColumn key="date" title="Date" width={150} />	
	<!-- 第一级分组 -->
	<TableColumn title="Delivery Info">
		<TableColumn key="name" title="Name" width={120} />					
		<!-- 第二级分组 -->
		<TableColumn title="Address Info">
			<TableColumn key="province" title="Province" width={120} />
			<TableColumn key="city" title="City" width={120} />
			<TableColumn key="address" title="Address" minWidth={200} />
			<TableColumn key="zip" title="Zip" width={100} />
		</TableColumn>
	</TableColumn>
</Table>`;

	// --- 文档表格数据 ---
	const tablePropsData = [
		{ id: 1, name: 'data', describe: '显示的数据', type: 'array', defaulValue: '[]' },
		{ id: 2, name: 'size', describe: '表格尺寸', type: "'sm' | 'md' | 'lg'", defaulValue: "'md'" },
		{ id: 3, name: 'border', describe: '是否带有纵向边框', type: 'boolean', defaulValue: 'false' },
		{ id: 4, name: 'stripe', describe: '是否为斑马纹表格', type: 'boolean', defaulValue: 'false' },
		{
			id: 5,
			name: 'showSummary',
			describe: '是否在表尾显示合计行',
			type: 'boolean',
			defaulValue: 'false'
		},
		{ id: 6, name: 'multiple', describe: '是否开启多选', type: 'boolean', defaulValue: 'false' },
		{
			id: 7,
			name: 'virtualized',
			describe: '是否开启虚拟滚动 (需固定容器高度)',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 8,
			name: 'rowHeight',
			describe: '虚拟滚动时的行高 (px)',
			type: 'number',
			defaulValue: '-'
		},
		{
			id: 9,
			name: 'summaryMethod',
			describe: '自定义的合计计算方法',
			type: 'Function',
			defaulValue: '-'
		}
	];

	const columnPropsData = [
		{ id: 1, name: 'key', describe: '对应列内容的字段名', type: 'string', defaulValue: '-' },
		{ id: 2, name: 'title', describe: '显示的标题', type: 'string', defaulValue: '-' },
		{ id: 3, name: 'width', describe: '对应列的宽度 (px)', type: 'number', defaulValue: '-' },
		{ id: 4, name: 'minWidth', describe: '对应列的最小宽度', type: 'number', defaulValue: '-' },
		{
			id: 5,
			name: 'align',
			describe: '对齐方式',
			type: "'left' | 'center' | 'right'",
			defaulValue: "'left'"
		},
		{
			id: 6,
			name: 'sortable',
			describe: '对应列是否可以排序',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 7,
			name: 'filterable',
			describe: '对应列是否可以筛选',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 8,
			name: 'filters',
			describe: '筛选选项数组 [{label, value}]',
			type: 'array',
			defaulValue: '-'
		},
		{
			id: 9,
			name: 'dataFilters',
			describe: '是否根据数据自动生成筛选选项',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 10,
			name: 'summary',
			describe: "聚合策略 ('sum', 'avg', 'max', 'min', 'count' 或 true)",
			type: 'string | boolean',
			defaulValue: 'false'
		}
	];

	const slotData = [
		{ id: 1, name: 'header', describe: '自定义表头内容', type: 'snippet' },
		{
			id: 2,
			name: 'cell',
			describe: '自定义单元格内容',
			type: 'snippet ({ row, index, column })'
		},
		{ id: 3, name: 'filterDropdown', describe: '自定义筛选弹窗内容', type: 'snippet' }
	];
	const filterKeyword: {
		min: number | null;
		max: number | null;
	} = $state({
		min: null,
		max: null
	});
	const onFilter = (
		value: { min: number | null; max: number | null },
		row: Record<string, any>
	) => {
		const { min, max } = value || {};
		const cellVal = row.age;
		if (min && cellVal < Number(min)) return false;
		if (max && cellVal > Number(max)) return false;
		return true;
	};
	let maxInputRef: HTMLInputElement | null = $state(null);
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Table 表格</div>
		<div class="describe">
			用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
		</div>
	</div>

	<!-- 1. 基础用法 -->
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">基础的表格展示用法。</div>
	</div>
	<ComponentPreview code={codeBasic}>
		<div class="example">
			<div class="example-group" style="height: 250px; width: 100%;">
				<Table data={basicData} size="lg">
					<TableColumn key="id" title="ID" width={80}/>
					<TableColumn key="name" title="Name" />
					<TableColumn key="age" title="Age" />
					<TableColumn key="role" title="Role" />
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- 2. 带斑马纹和边框 -->
	<div class="subtitle">
		<div class="name">带斑马纹和边框</div>
		<div class="describe">
			使用 <span class="tag">stripe</span> 属性可以创建带斑马纹的表格，使用
			<span class="tag">border</span> 属性可以创建带纵向边框的表格。
		</div>
	</div>
	<ComponentPreview code={codeStripeBorder}>
		<div class="example">
			<div class="example-group">
				<Table data={stripeData} size="lg" stripe border>
					<TableColumn key="name" title="Name" width={150} />
					<TableColumn key="age" title="Age" width={100} />
					<TableColumn key="role" title="Role" />
					<TableColumn key="status" title="Status" minWidth={200} />
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- 3. 多选 -->
	<div class="subtitle">
		<div class="name">多选</div>
		<div class="describe">
			设置 <span class="tag">multiple</span> 属性即可开启多选模式。
		</div>
	</div>
	<ComponentPreview code={codeSelection}>
		<div class="example">
			<div class="example-group">
				<Table data={selectionData} size="lg" multiple border>
					<TableColumn key="name" title="Name" width={150} />
					<TableColumn key="role" title="Role" />
					<TableColumn key="status" title="Status" />
					<TableColumn key="age" title="Age" />
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- 4. 排序与筛选 -->
	<div class="subtitle">
		<div class="name">排序与筛选</div>
		<div class="describe">
			在列配置中设置 <span class="tag">sortable</span> 开启排序，设置
			<span class="tag">filterable</span> 开启筛选。支持 <span class="tag">dataFilters</span>
			自动根据数据生成筛选选项。支持
			<span class="tag">filterDropdown</span>插槽自定义筛选弹窗内容，然后通过
			<span class="tag">onFilter</span> 回调函数处理筛选逻辑。
		</div>
	</div>
	<ComponentPreview code={codeSortFilter}>
		<div class="example">
			<div class="example-group" style="height: 300px;">
				<Table data={sortFilterData} size="lg" border>
					<TableColumn key="name" title="Name" width={150} filterable />
					<TableColumn key="age" title="Age (Sortable)" width={250} sortable filterable {onFilter}>
						{#snippet filterDropdown({ onConfirm, onReset })}
							<div class="filterDropdown">
								<Input
									size="lg"
									placeholder="最小值"
									bind:value={filterKeyword.min}
									width="150px"
									onKeydown={(event) => {
										if (event.key === 'Enter') {
											maxInputRef?.focus();
										}
									}}
								/>
								<Icon src="form/minus" />
								<Input
									bind:inputRef={maxInputRef}
									size="lg"
									placeholder="最大值"
									bind:value={filterKeyword.max}
									width="150px"
									onKeydown={(event) => {
										if (event.key === 'Enter') {
											onConfirm(filterKeyword);
										}
									}}
								/>
							</div>
							<Divider style="dashed" margin="8px" />
							<div class="filter-actions">
								<RectButton
									label="重置"
									variant="info"
									type="link"
									size="lg"
									style="height: auto;padding:4px 10px;"
									onClick={() => {
										filterKeyword.min = null;
										filterKeyword.max = null;
										onReset();
									}}
								></RectButton>
								<RectButton
									label="筛选"
									variant="primary"
									type="link"
									size="lg"
									style="height: auto;padding:4px 10px;"
									onClick={() => onConfirm(filterKeyword)}
								></RectButton>
							</div>
						{/snippet}
					</TableColumn>
					<TableColumn key="role" title="Role (Auto Filter)" width={250} filterable dataFilters />
					<TableColumn
						key="status"
						title="Status (Custom Filter)"
						filterable
						filters={[
							{ label: 'Active', value: 'Active' },
							{ label: 'Inactive', value: 'Inactive' }
						]}
					/>
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- 5. 自定义列模板 -->
	<div class="subtitle">
		<div class="name">自定义列模板</div>
		<div class="describe">
			通过 <span class="tag">cell</span> snippet 插槽可以自定义单元格内容，参数包含 row, column, index。
		</div>
	</div>
	<ComponentPreview code={codeSlot}>
		<div class="example">
			<div class="example-group" style="height: 250px; width: 100%;">
				<Table data={basicData} border size="lg">
					<TableColumn key="id" title="ID" width={80} />
					<TableColumn key="name" title="User Info" width={200}>
						{#snippet cell({ row })}
							<div style="display:flex; align-items:center; gap:8px;">
								<Icon src="user/avatar" size="16" />
								<span style="font-weight:bold;line-height:16px;">{row.name}</span>
							</div>
						{/snippet}
					</TableColumn>
					<TableColumn key="status" title="Status">
						{#snippet cell({ row })}
							<RectButton size="sm" variant={row.status === 'Active' ? 'success' : 'warning'}
								>{row.status}</RectButton
							>
						{/snippet}
					</TableColumn>
					<TableColumn key="action" title="Action" width={120} align="center">
						{#snippet cell({ row })}
							<RectButton type="link" size="sm" variant="primary" onClick={() => alert(row.name)}
								>Edit</RectButton
							>
						{/snippet}
					</TableColumn>
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- 6. 表尾合计行 -->
	<div class="subtitle">
		<div class="name">表尾合计行</div>
		<div class="describe">
			将 <span class="tag">showSummary</span> 设置为 true 可以在表尾显示合计行。列中设置
			<span class="tag">summary</span> 指定聚合方式 ('sum', 'avg' 等)。
		</div>
	</div>
	<ComponentPreview code={codeSummary}>
		<div class="example">
			<div class="example-group" style="height: 250px; width: 100%;">
				<Table data={summaryData} border showSummary size="lg">
					<TableColumn key="id" title="ID" width={80} summaryText="Total" summaryColSpan={2} />
					<TableColumn key="name" title="Name" />
					<TableColumn
						key="amount"
						title="Amount (Sum)"
						summary={true}
						summaryFormatter={(val) => `$ ${val}`}
					/>
					<TableColumn key="age" title="Age (Avg)" summary="avg" />
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- 7. 虚拟滚动 -->
	<div class="subtitle">
		<div class="name">虚拟滚动</div>
		<div class="describe">
			当数据量较大（例如 1000+）时，开启 <span class="tag">virtualized</span>
			可以显著提升渲染性能。需指定容器高度和 <span class="tag">rowHeight</span>。
		</div>
	</div>
	<ComponentPreview code={codeVirtual}>
		<div class="example">
			<div class="example-group" style="height: 400px; width: 100%;">
				<Table data={largeData} virtualized border size="lg">
					<TableColumn key="id" title="ID" minWidth={80} />
					<TableColumn key="name" title="Name" minWidth={150} />
					<TableColumn key="age" title="Age" minWidth={80} />
					<TableColumn key="role" title="Role" minWidth={120} />
					<TableColumn key="amount" title="Amount" minWidth={120} />
					<TableColumn key="status" title="Status" minWidth={100} />
				</Table>
			</div>
		</div>
	</ComponentPreview>
	<!-- 8. 多级表头 -->
	<div class="subtitle">
		<div class="name">多级表头</div>
		<div class="describe">
			通过嵌套 <span class="tag">TableColumn</span> 组件来实现多级表头。
            只有最底层的列需要指定 <span class="tag">key</span>，父级列仅用于分组展示。
		</div>
	</div>
	<ComponentPreview code={codeGroupHeader}>
		<div class="example">
			<div class="example-group">
				<Table data={groupHeaderData} border showToolbar>
					<TableColumn key="date" title="Date" width={150} />
					
                    <!-- 第一级分组 -->
					<TableColumn title="Delivery Info">
						<TableColumn key="name" title="Name" width={120} />					
                        <!-- 第二级分组 -->
						<TableColumn title="Address Info">
							<TableColumn key="province" title="Province" width={120} />
							<TableColumn key="city" title="City" width={120} />
							<TableColumn key="address" title="Address" minWidth={200} />
							<TableColumn key="zip" title="Zip" width={100} />
						</TableColumn>
					</TableColumn>
				</Table>
			</div>
		</div>
	</ComponentPreview>

	<!-- API Tables -->
	<div class="subtitle">
		<div class="name">Table Attributes</div>
	</div>
	<Table data={tablePropsData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={150} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={200}>
			{#snippet cell(scope)}
				<span class="tag">{scope.row.type}</span>
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<div class="subtitle">
		<div class="name">TableColumn Attributes</div>
	</div>
	<Table data={columnPropsData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={150} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={200}>
			{#snippet cell(scope)}
				<span class="tag">{scope.row.type}</span>
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<div class="subtitle">
		<div class="name">TableColumn Slots</div>
	</div>
	<Table data={slotData} border={false} size="lg">
		<TableColumn key="name" title="插槽名" align="left" minWidth={150} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300} />
	</Table>
</div>

<style>
	.filterDropdown {
		display: flex;
		padding: 6px 8px 4px 8px;
		gap: 10px;
		align-items: center;
	}
	.filter-actions {
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
	}
</style>
